<template>
    <div class='diamond'>
        <scroll>
            <div class="mod">
                <div class="box">
                    <h4>热搜榜</h4>
                    <hr>
                    <p v-for="(v, i) in hotSearch" :key="v.score" class="dataList"><span class="cont">{{ i + 1 }} {{
                        v.searchWord }}</span> {{
        v.content }}</p>
                </div>
                <div class="box">
                    <h4>歌手榜</h4>
                    <hr>
                    <p v-for="(v, i) in hotSongerSearch" :key="v.id" class="dataList">{{ i + 1 }} {{ v.name }}</p>
                </div>
                <div class="box">
                    <h4>歌手榜</h4>
                    <hr>
                    <p v-for="(v, i) in hotSongerSearch" :key="v.id" class="dataList">{{ i + 1 }} {{ v.name }}</p>
                </div>
            </div>
        </scroll>
    </div>
</template>

<script>
import scroll from '@/components/public/scroll.vue';
import { getHot, getSonger } from '@/api/index.js'

export default {
    name: 'diamond',
    data() {
        return {
            hotSearch: [],
            hotSongerSearch: []
        }
    },
    computed: {},
    components: {
        scroll
    },
    async created() {
        var { data } = await getHot()
        this.hotSearch = data.data
        var { data } = await getSonger()
        this.hotSongerSearch = data.artists
    },
    mounted() { },
    methods: {}
}
</script>
<style scoped>
h4 {
    margin: 10px;
}

hr {
    width: 96%;
    margin: 0 auto;
}

p {
    margin: 5px 0;
    height: 19px;
    overflow: hidden;
}

.mod {
    width: 760px;
    margin-top: 30px;
}

.box {
    width: 220px;
    background: #fff;
    float: left;
    margin-left: 10px;
    padding-left: 10px;
    border-radius: 15px;
}

.dataList {
    font-size: 14px;
}

.cont {
    font-size: 16px;
    color: rgb(255, 28, 28);
}
</style>
